<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>
    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有帐号？</span> <a href="#">登录</a>
        </div>
        <form id="reg-form" action="#" method="get">
    
            <table>
    
                <tr>
                    <td>用户名</td>
                    <td class="inputs">
    <!--                    <input name="username" type="text" id="username" onblur="checkUsername()">-->
                        <!-- TODO:给下面的用户名输入框绑定一个离焦事件，鼠标离开输入框焦点就调用函数checkUsername() -->
                        <input name="username" type="text" id="username" onblur="checkUsername()">
                        <br>
                        <!--display: none 属于css语法，表示隐藏标签  -->
                        <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                    </td>
    
                </tr>
    
                <tr>
                    <td>密码</td>
                    <td class="inputs">
                        <input name="password" type="password" id="password" onblur="checkPassword()">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                    </td>
                </tr>
    
    
                <tr>
                    <td>手机号</td>
                    <td class="inputs"><input name="tel" type="text" id="tel" onblur="checkTel()">
                        <br>
                        <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                    </td>
                </tr>
    
            </table>
    
            <div class="buttons">
                <input value="注 册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>
    
    </div>
    <script>
        //1. 验证 用户名是否符合规则：长度 6~12,单词字符组成
        //定义函数
        function checkUsername(){
            //获取函数值
            let un = document.getElementById('username').value;
            //创建正则对象
            let reg=/^\w{6,12}$/;
            //判断条件
            if(reg.test(un)){
                //条件满足：隐藏标签
                document.getElementById('username_err').style.display='none';
                //可以提交表单
                return true;
            }else{
                //条件不满足：显示标签
                document.getElementById('username_err').style.display='block';
                //不可以提交表单
                return false;
            }
        }

        //2. 验证 密码是否符合规则:长度 6~12任意字符
         //定义函数
         function checkPassword(){
            //获取函数值
            let pw = document.getElementById('password').value;
            //创建正则对象
            let reg=/^.{6,12}$/;
            //判断条件
            if(reg.test(pw)){
                //条件满足：隐藏标签
                document.getElementById('password_err').style.display='none';
                //可以提交表单
                return true;
            }else{
                //条件不满足：显示标签
                document.getElementById('password_err').style.display='block';
                //不可以提交表单
                return false;
            }
        }

        //3. 验证 手机号是否符合规则：长度 11，数字组成，第一位是1
          //定义函数
          function checkTel(){
            //获取函数值
            let t = document.getElementById('tel').value;
            //创建正则对象
            let reg=/^[1]\d{10}$/;
            //判断条件
            if(reg.test(t)){
                //条件满足：隐藏标签
                document.getElementById('tel_err').style.display='none';
                //可以提交表单
                return true;
            }else{
                //条件不满足：显示标签
                document.getElementById('tel_err').style.display='block';
                //不可以提交表单
                return false;
            }
        }

        //4. 表单是否可以提交
        document.getElementById('reg-form').onsubmit=function(){
            if(checkUsername()&&checkPassword()&&checkTel()){
                return true;
            }
        }
    </script>

</body>
</html>